@import "variables";
@import "mixins";

.btn-grad {
  &.btn-default,
  &.btn-primary,
  &.btn-success,
  &.btn-info,
  &.btn-warning,
  &.btn-danger {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    @shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    .box-shadow(@shadow);

    // Reset the shadow
    &:active,
    &.active {
      .box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
    }
  }
}

//
// Gradient Buttons
// --------------------------------------------------
.btn-gradient(@btn-color: #eee) {
  .box-shadow(e("0px 1px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 2px rgba(0, 0, 0, 0.15)"));
  #gradient > .vertical(lighten(@btn-color, 5%); darken(@btn-color, 5%));
  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
  background-repeat: repeat-x;
  border-color: darken(@btn-color, 10.1%);
  @darken: darken(@btn-color,30%);
  text-shadow: 0px -1px 1px rgba(red(@darken), green(@darken), blue(@darken),.35);

  &:hover,
  &:focus  {
    background: @btn-color;
    #gradient > .vertical(lighten(@btn-color, 10%); darken(@btn-color, 7%));
  }

  &:active,
  &.active {
    .box-shadow(e("inset 0px 1px 3px rgba(0, 0, 0, .3), 0px 1px 0px #fff"));
    text-shadow: 0px 1px 0px rgba(255, 255, 255, .4);
    background: @btn-color;
    color: darken(@btn-color, 20%);
  }

  &:disabled,
  &[disabled] {
    .box-shadow(0px 1px 2px rgba(0, 0, 0, .10));
    .opacity(.8);
  }
}

// Gradient Buttons Common styles
.btn-grad.btn {
  // Remove the gradient for the pressed/active state
  &:active,
  &.active {
    //background-image: none;
  }
}

// Apply the mixin to the buttons
.btn-grad {
  &.btn-default {
    .btn-gradient();
    text-shadow: 0px 1px 1px #FFF;
  }
  &.btn-primary {
    .btn-gradient(@brand-primary);
  }
  &.btn-success {
    .btn-gradient(@brand-success);
  }
  &.btn-warning {
    .btn-gradient(@brand-warning);
  }
  &.btn-danger {
    .btn-gradient(@brand-danger);
  }
  &.btn-info {
    .btn-gradient(@brand-info);
  }
}


.btn-circle {
  border-radius: 500px;
  .square(120px);
  line-height: 60px;
  text-align: center;
  border-width: 4px;

  &.btn-lg {
    .square(200px);
  line-height: 100px;
  }
  &.btn-sm {
    .square(90px);
  line-height: 45px;
  }
  &.btn-xs {
    .square(60px);
  line-height: 30px;
  }
}
.btn-rect {
  border-radius: 0 !important;
}
.btn.btn-pill {
  border-radius: 50px;
}

//
// Line Buttons
// -----------------------------------------------
.btn-line-states(@color: #eee) {
  color: @color;
  background: none;
  border: 2px solid @color;
  text-shadow: none;

  &:hover,
  &:focus {    
    background: none;
    color: lighten(@color, 10%);
    border-color: lighten(@color, 10%);
  }
  
   &:active,
  &.active {    
    background: none;
    color: darken(@color, 10%);
    border-color: darken(@color, 10%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: #eee;
      border: 1px solid #ddd;
      color: #ccc;
      text-shadow: 0 1px 1px #fff;
      .opacity(.8);
    }
  }
}
.btn-line {
  &.btn-default {
    .btn-line-states(#808080);
  }
  &.btn-primary {
    .btn-line-states(@brand-primary);
  }
  &.btn-warning {
    .btn-line-states(@brand-warning);
  }
  // Danger and error appear as red
  &.btn-danger {
    .btn-line-states(@brand-danger);
  }
  // Success appears as green
  &.btn-success {
    .btn-line-states(@brand-success);
  }
  // Info appears as blue-green
  &.btn-info {
    .btn-line-states(@brand-info);
  }
  
}

.btn-flat {
  border-width:0 !important;
  &.btn-default {
    background-color: #ddd;
  }
}



.btn-wrap {
  #gradient > .vertical(#E3E3E3; #F2F2F2);
  border-radius: 500px;
  .box-shadow(0px 1px 3px rgba(0, 0, 0, 0.04) inset);
  padding: 10px;
  display: inline-block;
}

.btn-3d-build(@btn-color: #eee) {
        .transition(all .3s);
        @shadow:inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken(@btn-color, 20%), 0px 8px 3px rgba(0, 0, 0, .2);
        .box-shadow(@shadow);
         #gradient > .vertical(lighten(@btn-color, 2%); darken(@btn-color, 2%));
        background-color: @btn-color;
        border: 1px solid darken(@btn-color, 5%);
        text-shadow: none;
        position: relative;
        top: 0px;

        &:hover, &:focus {
	    @shadow:inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken(@btn-color, 12%), 0px 8px 3px rgba(0, 0, 0, .3);
	    .box-shadow(@shadow);
	     #gradient > .vertical(lighten(@btn-color, 8%); darken(@btn-color, 1%));
            background-color: lighten(@btn-color, 10%);
        }
        &:active,
        &.active {
            @shadow:inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken(@btn-color, 10%), 0px 3px 3px rgba(0, 0, 0, .3);
	    .box-shadow(@shadow);
            #gradient > .vertical(lighten(@btn-color, 2%); darken(@btn-color, 2%));
            @darken: darken(@btn-color, 20%);
            background-color: @darken;
            border: 1px solid darken(@btn-color, 5%);
            top: 5px;
        }
}

.btn-3d {
  &.btn-default {
    .btn-3d-build();
  }
  &.btn-primary {
    .btn-3d-build(@brand-primary);
  }
  &.btn-warning {
    .btn-3d-build(@brand-warning);
  }
  // Danger and error appear as red
  &.btn-danger {
    .btn-3d-build(@brand-danger);
  }
  // Success appears as green
  &.btn-success {
    .btn-3d-build(@brand-success);
  }
  // Info appears as blue-green
  &.btn-info {
    .btn-3d-build(@brand-info);
  }
  
}